<!-- 我的收益 -->
<template>
  <div class="person_container">
    <div v-show="infoShow">
      <div class="person_box">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div class="person_detail">
            <img src="@/assets/img/yLogo.png" />
            <div class="flx-st">
              <div><span>代理商</span>： {{ userInfo.name }}</div>
              <div><span>电话</span>： {{ userInfo.contactPhone }}</div>
              <div><span>地址</span>： {{ userInfo.addressDetail }}</div>
              <!-- <div><span>绑定手机号</span>： {{ userInfo.phone }}
                <span v-if="!userInfo.phone" @click="visibleBindPhone = true" style="color: #9981ff;">去绑定</span>
                <span v-else @click="visibleBindPhone = true" style="color: #9981ff;">更换绑定</span>
              </div> -->
              <div>
                <span>实名状态</span>：
                {{ userInfo.isRealName == 1 ? "已实名" : "未实名" }}
                <span
                  v-if="userInfo.isRealName != 1"
                  @click="visibleIdCardVerify = true"
                  style="color: #9981ff"
                  >去实名</span
                >
              </div>
              <div
                style="cursor: pointer"
                @click="toUrl('https://yushiai.com.cn/userAgreement?_id=5')"
              >
                <span>规则制度</span>：<span style="color: #9981ff"
                  >《遇识爱代理管理制度》</span
                >
              </div>
            </div>
          </div>
          <!-- <div style="width: 49%;">
            <div style="font-size: 18px;color: #333333;margin-bottom: 20px;">用户消费返还详情</div>
            <div class="detail_number">
              ￥<span>{{sum}}</span>
            </div>
            <div class="backDetail" @click="backDetail = true,infoShow = false">返还明细<i class="el-icon-arrow-right"></i>
            </div>
          </div> -->
        </div>
        <div
          style="
            font-size: 30px;
            color: #333;
            margin-top: 30px;
            margin-bottom: 16px;
            font-weight: 500;
          "
        >
          我的收益
        </div>
        <div class="income_box flx-c">
          <div class="income_item flx-sb">
            <div class="flx-sb">
              <div>
                <span style="color: #666">收益</span>
                <el-tooltip
                  popper-class="atooltip"
                  :offset="50"
                  placement="right-end"
                  effect="light"
                >
                  <div slot="content" class="msg-tip">
                    <div>一级代理商：（收益）</div>
                    <div>
                      1、用户音视频，打赏，送礼，视频加热，VIP充值抽佣 （10%）
                    </div>
                    <div>2、用户购物抽佣 （0.5%）</div>
                    <div>3、用户投放用户和商家广告抽佣 （5%）</div>
                    <div>4、对二级抽佣 （20%）</div>
                    <div>1.平台奖励：</div>
                    <div>(1)完成平台规定的KPI指标，奖励500-5000元不等；</div>
                    <div>
                      (2)超出完成平台规定的KPI指标，奖励抽佣比例0.1%-1%不等；
                    </div>
                    <div>2.平台处罚：</div>
                    <div>
                      a、一般违规处罚措施为书面警告和扣除保证金1000元/次，并降低用户消费返抽佣比例；
                    </div>
                    <div>
                      b、严重违规处罚措施为书面警告、扣除保证金2000-5000元、降低用户消费返抽佣比例和广告抽佣比例。
                    </div>
                  </div>
                  <img
                    src="@/assets/img/ad-que.png"
                    style="
                      width: 16px;
                      height: 16px;
                      margin-left: 8px;
                      margin-bottom: 5px;
                    "
                  />
                </el-tooltip>
              </div>
              <span
                style="font-size: 14px; color: #ff68b2; cursor: pointer"
                @click="(billShow = true), (infoShow = false)"
                >收支明细 <i class="el-icon-arrow-right"></i
              ></span>
            </div>
            <div class="flx-sb">
              <span style="color: #333"
                >￥<span style="font-size: 32px">{{
                  userInfo.balance
                }}</span></span
              >
              <!-- <el-button type="primary">全部提现</el-button> -->
              <div class="txBtn flx-c" @click="Payouts()">提现</div>
            </div>
          </div>
          <div class="income_item flx-sb" style="margin-left: 30px">
            <div>
              <span style="font-size: 18px; color: #666">保证金</span>
              <el-tooltip
                popper-class="atooltip"
                placement="top"
                effect="light"
              >
                <div slot="content" class="msg-tip">
                  <div>保证金：</div>
                  <div>
                    保证金是用于保障用户权益，为避免发布违法违规的广告设置的保证金条件，保证金充值不低于1000元。
                  </div>
                  <div>平台处罚：</div>
                  <div>
                    a、一般违规处罚措施为书面警告和扣除保证金1000元/次，并降低用户消费返抽佣比例；
                  </div>
                  <div>
                    b、严重违规处罚措施为书面警告、扣除保证金2000-5000元、降低用户消费返抽佣比例和广告抽佣比例。
                  </div>
                </div>
                <img
                  src="@/assets/img/ad-que.png"
                  style="
                    width: 16px;
                    height: 16px;
                    margin-left: 8px;
                    margin-bottom: 5px;
                  "
                />
              </el-tooltip>
            </div>
            <div class="flx-sb">
              <span style="font-size: 32px; color: #333"
                >应交{{ userInfo.payableDepositMoney || 0 }} </span
              ><span style="font-size: 32px; color: #333"
                >已交{{ userInfo.realityDepositMoney || 0 }}
              </span>
              <div class="txBtn flx-c" @click="visibleRecharge = true">
                缴费/补缴
              </div>
            </div>
          </div>
          <!-- <div class="income_item flx-sb" style="margin-left: 30px;">
            <div class="flx-sb">
              <span style="font-size: 18px;color: #666;">广告金余额</span>
            </div>
            <div class="flx-sb">
              <span style="font-size: 32px;color: #333;">{{ userInfo.advertisementBalance || 0 }}
              </span>
              <div class="txBtn flx-c" @click="visibleRecharge = true">充值</div>
            </div>
          </div> -->
          <!-- <div class="income_item flx-sb" style="margin-left: 30px;">
            <div class="flx-sb">
              <span style="font-size: 18px;color: #666;">广告折扣</span>
            </div>
            <div class="flx-sb">
              <span style="font-size: 32px;color: #333;">{{ userInfo.rate }}
              </span>
            </div>
          </div> -->
        </div>
      </div>
      <div class="newRR">
        <div class="record flx-sb">
          <div class="record_item">
            <div class="record_title">
              平台奖励
              <el-tooltip
                popper-class="atooltip"
                :offset="50"
                placement="right-end"
                effect="light"
              >
                <div slot="content" class="msg-tip">
                  <div>一级代理商KPI任务：</div>
                  <div>
                    3个月发展50个本地二级代理商，拉新3个月完成5000人
                    ，3个月团购商家30家商家入驻，线上商家入驻50家 ；
                  </div>
                  <div>二级代理商KPI任务：</div>
                  <div>
                    拉新3个月完成5000人
                    ，3个月团购商家30家商家入驻，线上商家入驻50家；
                  </div>
                  <div>奖励：</div>
                  <div>
                    完成任务奖励现金1000元-2000元，并返佣基础上再奖励10%，比如：抽佣5%，再奖励10%为奖励5%*10%=0.5%，合计抽佣为5.5%，以此类推完成3次任务要求。
                  </div>
                  <div>处罚：</div>
                  <div>
                    任务首次没有完成，降低抽佣比例10%，比如：抽佣5%，处罚20%为处罚5%*10%=0.5%，合计抽佣为5%-0.5%=4.5%，以此类推未完成3次任务要求，取消代理商提现权限（限时2个月完成任务后恢复，如无完成，取消代理商资格权限）
                  </div>
                </div>
                <img
                  src="@/assets/img/ad-que.png"
                  style="
                    width: 16px;
                    height: 16px;
                    margin-left: 8px;
                    margin-bottom: 5px;
                  "
                />
              </el-tooltip>
            </div>
            <div class="record_detail_box flx-st">
              <div class="record_detail_item flx-sb">
                <div>
                  <div style="font-size: 20px; color: #333">
                    完成任务奖励金额
                  </div>
                  <div style="font-size: 16px; color: #333">
                    奖励：￥{{ userInfo.rewardMoney }}
                  </div>
                </div>
                <div>
                  <div
                    style="text-align: right; font-size: 24px; color: #ff68b2"
                  >
                    ￥{{ userInfo.monthRechargeMoney }}
                  </div>
                  <div style="text-align: right; font-size: 12px; color: #666">
                    达标立即结算，发放至收益
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="record_item"
            style="margin-left: 30px"
            v-if="userPenaltyList.length > 0"
          >
            <div class="record_title">平台惩罚</div>
            <div class="record_detail_box flx-st">
              <div
                class="record_detail_item flx-sb"
                v-for="(item, index) in userPenaltyList"
                :key="index"
              >
                <div style="width: 70%">
                  <div style="font-size: 20px; color: #333">违规处罚</div>
                  <div style="font-size: 16px; color: #333">
                    {{ item.reason }}
                  </div>
                  <div style="font-size: 16px; color: #333; margin: 12px 0">
                    广告链接：{{ item.adLink }}
                  </div>
                </div>
                <div style="width: 30%">
                  <div
                    style="text-align: right; font-size: 24px; color: #ff68b2"
                  >
                    ￥{{ item.money }}
                  </div>
                  <div style="text-align: right; font-size: 12px; color: #666">
                    {{ item.createTime }}
                  </div>
                </div>
                <div class="img_box" v-if="item.open">
                  <el-image
                    style="width: 40px; height: 40px; margin-right: 5px"
                    :src="$staticURL + item.picUrl"
                    v-if="item.picUrl"
                    :preview-src-list="[$staticURL + item.picUrl]"
                  >
                  </el-image>
                </div>
                <div class="open_btn flx-c" @click="open(index)">
                  <span v-if="!item.open"
                    ><i class="el-icon-arrow-down"></i>展开图片</span
                  >
                  <span v-else><i class="el-icon-arrow-up"></i>收起图片</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bill_detail" v-show="billShow">
      <div class="bill_title_box">
        <div>收入</div>
        <div class="bill_title_content flx-c">
          <div>{{ sumWW }}元</div>
          <img src="@/assets/img/line.png" />
          <div>2024年</div>
        </div>
      </div>
      <el-tabs>
        <el-tab-pane>
          <div class="record">
            <div
              class="record_item"
              v-for="(item, index) in recordDL"
              :key="index"
            >
              <div>
                <span style="font-size: 20px; color: #333">{{
                  item.describe
                }}</span>
                <span style="font-size: 16px; color: #666">{{
                  item.createTime
                }}</span>
              </div>
              <div
                style="
                  font-size: 24px;
                  color: rgba(255, 104, 178, 0.74);
                  text-align: right;
                "
              >
                ￥{{ item.rewardMoney }}
                <!-- <el-icon>
                  <ArrowRight />
                </el-icon> -->
              </div>
            </div>
          </div>
        </el-tab-pane>
        <!-- <el-tab-pane label="支出">
          <div class="record">
            <div class="record_item" v-for="(item, index) in recordDL" :key="index">
              <div>
                <span style="font-size: 20px;color: #333;">{{ item.describe }}</span>
                <span style="font-size: 16px;color: #666;">{{ item.createTime }}</span>
              </div>
              <div style="font-size: 24px;color: rgba(255, 104, 178, 0.74);text-align: right;">￥{{ item.rewardMoney }}
                
              </div>
            </div>
          </div>
        </el-tab-pane> -->
      </el-tabs>
    </div>

    <div class="bill_detail" v-show="backDetail">
      <div class="bill_title_box">
        <div>返还明细</div>
        <div class="bill_title_content flx-c">
          <div>{{ sum }}元</div>
          <img src="@/assets/img/line.png" />
          <div>2024年</div>
        </div>
      </div>
      <el-tabs>
        <el-tab-pane label="返还明细">
          <div class="record">
            <div
              class="record_item"
              v-for="(item, index) in recordDLBack"
              :key="index"
            >
              <div>
                <span style="font-size: 20px; color: #333">{{
                  item.describe
                }}</span>
                <span style="font-size: 16px; color: #666">{{
                  item.createTime
                }}</span>
              </div>
              <div
                style="
                  font-size: 24px;
                  color: rgba(255, 104, 178, 0.74);
                  text-align: right;
                "
              >
                ￥{{ item.rewardMoney }}
                <!-- <el-icon>
                  <ArrowRight />
                </el-icon> -->
              </div>
            </div>
          </div>
        </el-tab-pane>
        <!--        <el-tab-pane label="支出">
          <div class="record">
            <div class="record_item" v-for="(item, index) in billList[1]" :key="index">
              <div>
                <span style="font-size: 20px;color: #333;">{{ item.title }}</span>
                <span style="font-size: 16px;color: #666;">{{ item.time }}</span>
              </div>
              <div style="font-size: 24px;color: #10a4aa;text-align: right;">{{ item.money }}<el-icon>
                  <ArrowRight />
                </el-icon></div>
            </div>
          </div>
        </el-tab-pane> -->
      </el-tabs>
    </div>
    <div class="backPos" v-show="!infoShow">
      <div
        class="back"
        @click="(infoShow = true), (billShow = false), (backDetail = false)"
      >
        <a-icon type="rollback" style="font-size: 20px; color: #fff" />
        <span style="font-size: 12px; line-height: 20px; color: #fff"
          >返回</span
        >
      </div>
    </div>
    <el-dialog
      custom-class="classDialog"
      :visible="visibleRecharge"
      @close="visibleRecharge = false"
      width="25%"
    >
      <recharge @successPay="successPay"></recharge>
    </el-dialog>
    <el-dialog
      custom-class="classDialog item"
      :visible="visibleWithdrow"
      @close="visibleWithdrow = false"
      width="25%"
    >
      <withdrow @successPay="successPay"></withdrow>
    </el-dialog>

    <el-dialog
      custom-class="classDialog"
      :visible="visibleBindPhone"
      @close="visibleBindPhone = false"
      width="25%"
    >
      <bindPhone @successPay="successPay"></bindPhone>
    </el-dialog>

    <el-dialog
      custom-class="classDialog"
      :visible="visibleIdCardVerify"
      @close="visibleIdCardVerify = false"
      width="25%"
    >
      <idCardVerify @successPay="successPay"></idCardVerify>
    </el-dialog>
  </div>
</template>

<script>
import recharge from "@/components/recharge/recharge";
import withdrow from "@/components/withdrow/withdrow";
import bindPhone from "@/components/bindPhone/bindPhone";
import idCardVerify from "@/components/idCardVerify/idCardVerify";
export default {
  name: "AdvEarnings",
  components: {
    recharge,
    withdrow,
    idCardVerify,
    bindPhone,
  },
  data() {
    return {
      sum: 0,
      sumWW: 0,
      visibleWithdrow: false,
      visibleBindPhone: false,
      visibleIdCardVerify: false,
      visibleRecharge: false,

      backDetail: false,
      billShow: false,
      infoShow: true,
      userInfo: {
        name: "代理商",
        phone: "13000000000",
        address: "地址地址地址地址地址",
        money: "666666",
        discount: "3.5",
      },
      recordList: [
        [
          {
            title: "达成季度任务KPI:30万",
            reward: "奖励:5%",
            money: "15000.00",
            time: "2022/03/27  15:30:00",
          },
          {
            title: "达成季度任务KPI:30万",
            reward: "奖励:5%",
            money: "15000.00",
            time: "2022/03/27  15:30:00",
          },
        ],
        [
          {
            title: "违规处罚",
            content: "处罚理由明细:审核完成后修改链接内容涉嫌涉黄违法内容",
            punish: "-2000.00",
            money: "15000.00",
            time: "2022/03/27  15:30:00",
            link: "http//www.cucdshcjsp.com",
            picUrl: ["img/mark.png", "img/mark.png"],
            open: false,
          },
          {
            title: "违规处罚",
            content: "处罚理由明细:审核完成后修改链接内容涉嫌涉黄违法内容",
            punish: "-2000.00",
            money: "15000.00",
            time: "2022/03/27  15:30:00",
            link: "http//www.cucdshcjsp.com",
            picUrl: ["img/mark.png", "img/mark.png"],
            open: false,
          },
        ],
      ],
      backDetailList: [
        {
          title: "广告主1购买广告",
          time: "2022/03/27 15:30:00",
          money: 3000,
        },
        {
          title: "广告主2购买广告",
          time: "2022/03/27 15:30:00",
          money: 3000,
        },
      ],
      billList: [
        [
          {
            title: "广告收益",
            time: "2022/03/27 15:30:00",
            money: 9.98,
          },
          {
            title: "广告收益",
            time: "2022/03/27 15:30:00",
            money: 9.98,
          },
        ],
        [
          {
            title: "广告支出",
            time: "2022/03/27 15:30:00",
            money: 9.98,
          },
          {
            title: "广告支出",
            time: "2022/03/27 15:30:00",
            money: 9.98,
          },
        ],
      ],
      userPenaltyList: [],
      recordDL: [],
      recordDLBack: [],
    };
  },
  mounted() {
    this.userInfo = JSON.parse(localStorage.getItem("advertisementUserMes"));
    console.log(this.userInfo, "9999");
    console.log(
      "打印userid",
      JSON.parse(localStorage.getItem("advertisementUserMes"))
        .advertisementUserId
    );

    this.getRewardDetailList();
    this.getLoginUserAdvertisementUserPenaltyList();
  },
  methods: {
    toUrl(url) {
      window.open(url);
    },
    open(i) {
      this.userPenaltyList[i].open = !this.userPenaltyList[i].open;
      this.$forceUpdate();
    },
    successPay() {
      this.visibleBindPhone = false;
      this.visibleIdCardVerify = false;
      this.visibleRecharge = false;
      this.visibleWithdrow = false;
      this.getAdvertisementUserMes();
    },
    async getAdvertisementUserMes() {
      let res = await this.$API.members.getAdvertisementUserMes({
        advertisementUserId: JSON.parse(
          localStorage.getItem("advertisementUserMes")
        ).advertisementUserId,
      });
      localStorage.setItem("advertisementUserMes", JSON.stringify(res.data));
      this.userInfo = res.data;
      console.log("代理商信息", res);
    },
    async getLoginUserAdvertisementUserPenaltyList() {
      let res =
        await this.$API.members.getLoginUserAdvertisementUserPenaltyList();
      console.log("处罚信息", res);
      this.userPenaltyList = res.data;
      this.userPenaltyList.forEach((i, index) => {
        i.open = false;
      });
      console.log("处罚信息", this.userPenaltyList);
    },
    async getRewardDetailList() {
      let res = await this.$API.members.getRewardDetailList({
        pageNumber: 1,
        pageSize: 10000,
        orderBY: "",
      });
      console.log("收益信息", res);
      this.recordDL = res.data.rows;
      this.recordDL.forEach((item) => {
        this.sumWW += item.rewardMoney;
      });

      this.recordDLBack = res.data.rows.filter((item) => item.rewardType == 3);
      console.log("用户消费返还详情", this.recordDLBack);
      this.recordDLBack.forEach((item) => {
        this.sum += item.rewardMoney;
      });
    },
    Payouts() {
      if (this.userInfo.isRealName == 1) {
        this.visibleWithdrow = true;
      } else {
        this.$message.warning("请先实名认证");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.backDetail {
  font-size: 14px;
  color: #ff68b2;
  position: relative;
  top: -140px;
  left: 88%;

  i {
    margin-left: 4px;
  }
}

.detail_number {
  width: 100%;
  height: 160px;
  line-height: 160px;
  text-align: center;
  color: #ff68b2;
  font-size: 26px;
  border-radius: 20px;
  font-weight: 400;
  background-color: rgba(255, 104, 178, 0.05);

  span {
    font-size: 36px;
  }
}

.person_container {
  padding: 30px;

  .person_box {
    margin-top: 30px;
    padding: 30px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);

    .person_detail {
      display: flex;

      img {
        width: 120px;
        height: 120px;
        border-radius: 100px;
      }

      & > div {
        display: flex;
        height: 120px;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        padding: 20px 0;
        box-sizing: border-box;

        span {
          display: inline-block;
          // width: 40px;
        }
      }
    }

    .income_box {
      .income_item {
        flex: 1;
        border-radius: 10px;
        border: 1px solid #eee;
        height: 148px;
        padding: 30px;
        box-sizing: border-box;
        font-size: 18px;
        flex-direction: column;

        & > div {
          width: 100%;

          .el-button {
            height: 42px;
            width: 132px;
          }
        }
      }
    }

    .record {
      margin-top: 30px;
      align-items: flex-start;

      .record_item {
        background-color: #fff;
        border-radius: 20px;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
        flex: 1;
        padding: 30px;
        box-sizing: border-box;

        .record_title {
          font-size: 20px;
          color: #3d3d3d;
        }

        .record_detail_box {
          flex-direction: column;
          padding: 10px 0;

          .record_detail_item {
            width: 100%;
            background-color: #f5f5f5;
            border-radius: 5px;
            padding: 12px;
            box-sizing: border-box;
            align-items: flex-start;
            position: relative;
            flex-wrap: wrap;
            margin-bottom: 16px;

            .img_box {
              .el-image {
                width: 38px;
                height: 32px;
              }
            }

            .open_btn {
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              z-index: 1;
              height: 20px;
              background-color: #eee;
              cursor: pointer;

              .el-icon {
                transition: 0.2s all;
              }

              .open {
                transform: rotate(180deg);
              }
            }
          }
        }
      }
    }
  }

  .bill_detail {
    background-color: #fff;
    border-radius: 20px;
    padding: 30px;

    .bill_title_box {
      padding: 30px;
      color: #fff;
      font-size: 24px;
      // background-color: #10A4AAbd;
      background-color: rgba(255, 104, 178, 0.74);
      border-radius: 20px;

      .bill_title_content {
        font-size: 30px;

        span {
          display: block;
          width: 137.32px;
          height: 14.31px;
          border: 1px solid;
          transform: rotate(135deg);
          border-image: linear-gradient(
            270deg,
            rgba(255, 255, 255, 0) 1%,
            #ffffff 30%,
            #ffffff 68%,
            rgba(255, 255, 255, 0) 100%
          );
        }
      }
    }

    :deep(.el-tabs__header) {
      margin-top: 30px;

      .el-tabs__item {
        color: #333;
        font-size: 24px;
        margin-bottom: 10px;
      }

      .el-tabs__nav-wrap::after {
        background-color: unset;
      }
    }

    .record {
      display: flex;
      flex-direction: column;

      .record_item {
        display: flex;
        align-items: center;
        width: 100%;
        margin-bottom: 30px;

        & > div {
          flex: 1;

          span {
            display: block;
          }
        }
      }
    }
  }
}

.newRR {
  .record {
    margin-top: 30px;
    align-items: flex-start;

    .record_item {
      background-color: #fff;
      border-radius: 20px;
      box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
      flex: 1;
      padding: 30px;
      box-sizing: border-box;

      .record_title {
        font-size: 20px;
        color: #3d3d3d;
      }

      .record_detail_box {
        flex-direction: column;
        padding: 10px 0;

        .record_detail_item {
          width: 100%;
          background-color: #f5f5f5;
          border-radius: 5px;
          padding: 12px;
          box-sizing: border-box;
          align-items: flex-start;
          position: relative;
          flex-wrap: wrap;
          margin-bottom: 16px;

          .img_box {
            .el-image {
              width: 38px;
              height: 32px;
            }
          }

          .open_btn {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 1;
            height: 20px;
            background-color: #eee;
            cursor: pointer;

            .el-icon {
              transition: 0.2s all;
            }

            .open {
              transform: rotate(180deg);
            }
          }
        }
      }
    }
  }
}

::v-deep .el-dialog__wrapper .el-dialog {
  border-radius: 20px !important;
}

.txBtn {
  width: 132px;
  height: 42px;
  border-radius: 5px;
  background: rgba(255, 104, 178, 0.44);

  font-size: 18px;
  color: #ffffff;
}

.flx-sb {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flx-st {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.flx-c {
  display: flex;
  align-items: center;
  justify-content: center;
}

.backPos {
  position: absolute;
  right: 40px;
  bottom: 100px;
  z-index: 99;

  .back {
    width: 36px;
    // height: 54px;
    padding: 2px 0;
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: rgba(255, 104, 178, 0.74);
  }
}

.msg-tip {
  width: 700px;
  // height: 252px;
  padding: 5px;

  div {
    margin: 8px 0;
    font-size: 14px;
    color: #666666;
  }
}
</style>

<style lang="scss">
// 处理提示框的颜色
.atooltip.el-tooltip__popper {
  background: rgba(255, 255, 255, 1) !important;
  // box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 1px 0px 6px 0px rgba(0, 0, 0, 0.3);
  border-radius: 15px;
  border: none;

  & > div {
    color: gray !important;
  }
}

.item {
  width: 30% !important;
}

// 处理箭头的颜色
.atooltip.el-tooltip__popper .popper__arrow {
  border: none;
  background: rgba(255, 255, 255, 1) !important;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
}
</style>
